<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="4"><el-input v-model="full_name" placeholder="请输入姓名" size="small"></el-input> </el-col>
      <el-col :span="4"><el-input v-model="username" placeholder="请输入账号" size="small"></el-input> </el-col>
      <el-col :span="4"><el-input v-model="mobile" placeholder="请输入手机号" size="small"></el-input> </el-col>
      <el-col :span="10"><el-date-picker v-model="time" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" size="small"> </el-date-picker></el-col>
      <el-col :span="2"><el-button type="primary" size="small" @click="searchFn()">搜索</el-button></el-col>
    </el-row>
    <div class="table">
      <simple-table :tableConfig="tableConfig" :tableData="tableData"></simple-table>
    </div>
    <div class="page">
      <el-pagination background @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="this.limit" layout="total, prev, pager, next" :total="total"> </el-pagination>
    </div>
  </div>
</template>
<script>
import simpleTable from '@/components/table.vue'
import {APIGETLOGLIST} from '@/common/api.js'
export default {
  components: {
    simpleTable
  },
  data () {
    return {
      full_name: '',
      username: '',
      mobile: '',
      time: [],
      tableConfig: {
        load: false,
        size: 'small', // 表格大小
        style: 'width:100%', // 表格宽度
        align: 'center',
        selection: true,
        border: true,
        config: [
          {name: '序号', type: 'index', width: '60px'},
          {id: 'full_name', name: '姓名'},
          {id: 'username', name: '账号'},
          {id: 'role_name', name: '角色'},
          {id: 'mobile', name: '手机号'},
          {id: 'event_title', name: '事件'},
          {id: 'create_time', name: '操作时间'}
        ]
      },
      tableData: [],
      currentPage: 1,
      total: 0,
      page: 1,
      limit: 10
    }
  },
  created () {
    this.tableList()
  },
  methods: {
    tableList () {
      APIGETLOGLIST({
        full_name: this.full_name,
        username: this.username,
        mobile: this.mobile,
        start_time: this.time ? this.time[0] : '',
        end_time: this.time ? this.time[1] : '',
        page: this.page,
        limit: this.limit
      }).then((res) => {
        if (res.data !== null) {
          this.tableData = res.data.list
          this.total = res.data.totalNumber
          this.currentPage = res.data.page
        } else {
          this.tableData = []
        }
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    },
    searchFn () {
      this.tableList()
    },
    handleCurrentChange (val) { // 分页
      this.page = val
      this.tableList()
    }
  }
}
</script>
